<template>
  <div class="flex flex-row aic flex-wrap">
    <!-- 搜索组件 -->
    <template v-for="(item, index) in props.data" :key="index">
      <!-- 输入框 -->
      <div v-if="item.type == 'input'" class="flex flex-row aic mr-40px mb-12px">
        <text class="screenLabel" v-if="item.text">{{ item.text }} ：</text>
        <a-input
          :style="{ width: item.width + 'px' || '465px' }"
          v-model:value="item.value"
          :placeholder="item.placeHolder || '请输入'"
        />
      </div>
      <!-- 选择框 -->
      <div v-if="item.type == 'select'" class="flex flex-row aic mr-40px mb-12px">
        <text class="screenLabel" v-if="item.text">{{ item.text }} ：</text>
        <a-select
          :show-search="item.showSearch || false"
          v-model:value="item.value"
          :style="{ width: item.width + 'px' || '465px' }"
          :options="item.options"
          :fieldNames="{
            label: 'name',
            value: 'id',
          }"
          :placeholder="item.placeHolder || '请选择'"
        >
        </a-select>
      </div>
      <!-- 多选选择框-->
      <div v-if="item.type == 'multiple'" class="flex flex-row aic mr-40px mb-12px">
        <text class="screenLabel" v-if="item.text">{{ item.text }} ：</text>
        <a-select
          :max-tag-count="1"
          mode="multiple"
          :show-search="item.showSearch || false"
          v-model:value="item.value"
          :style="{ width: item.width + 'px' || '465px' }"
          :options="item.options"
          :fieldNames="{
            label: 'name',
            value: 'id',
          }"
          :placeholder="item.placeHolder || '请选择'"
        >
        </a-select>
      </div>
      <!-- 父子关联选择器 -->
      <div v-if="item.type == 'cascadeSel'" class="flex flex-row aic mr-40px mb-12px">
        <div class="flex flex-row aic mr-10px">
          <text class="screenLabel" v-if="item.text">{{ item.text }} ：</text>
          <a-select
            :show-search="item.showSearch || false"
            v-model:value="item.value"
            :style="{ width: item.width + 'px' || '465px' }"
            :options="item.options"
            :fieldNames="{
              label: 'name',
              value: 'id',
            }"
            :placeholder="item.placeHolder || '请选择'"
            @change="cascadeTap($event, index)"
          >
          </a-select>
        </div>
        <div class="flex flex-row aic">
          <a-select
            v-if="item.child.type == 'sel'"
            :show-search="item.child.showSearch || false"
            v-model:value="item.child.value"
            :style="{ width: item.child.width + 'px' || '465px' }"
            :options="item.child.options"
            :fieldNames="{
              label: 'name',
              value: 'id',
            }"
            :placeholder="item.child.placeHolder || '请选择'"
          >
          </a-select>
          <a-select
            v-if="item.child.type == 'mul'"
            :max-tag-count="1"
            mode="multiple"
            :show-search="item.child.showSearch || false"
            v-model:value="item.child.value"
            :style="{ width: item.child.width + 'px' || '465px' }"
            :options="item.child.options"
            :fieldNames="{
              label: 'name',
              value: 'id',
            }"
            :placeholder="item.child.placeHolder || '请选择'"
          >
          </a-select>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
const props = defineProps({ data: { type: Array, default: [] } });
const cascadeTap = function (e: any, index: number) {
  //清空子的选择
  let data = reactive<any>(props.data);
  data[index].child.value = [];
  //清空子的选择
};
</script>
